<template>
  <div class="mobile-order-list">
    <!-- 加载状态 -->
    <div v-if="loading" class="loading-container">
      <el-skeleton :rows="3" animated />
    </div>

    <!-- 订单列表 -->
    <div v-else-if="list.length > 0" class="order-list">
      <el-card v-for="(item, index) in list" :key="item.uuid || index" class="order-card" shadow="hover">
        <!-- 订单基本信息 -->
        <div class="order-header">
          <span class="order-number">
            <span class="label">订单号：</span>
            <span class="value">{{ item.uuid || '--' }}</span>
          </span>
          <span><el-tag :type="getStatusType(item.status)" size="small">{{ getStatusText(item.status) }}</el-tag></span>
        </div>

        <!-- 订单详情 -->
        <el-descriptions :column="1" size="small" class="order-descriptions"
          :label-style="{ width: '80px', fontSize: '13px', color: '#666' }"
          :content-style="{ fontSize: '13px', color: '#333' }">
          <el-descriptions-item label="支付号">
            {{ item.outTradeNo || '--' }}
          </el-descriptions-item>

          <el-descriptions-item label="套系/属地">
            <span class="template-name">{{ item.name || '--' }}</span>
              <el-divider direction="vertical"></el-divider>
              <span><dict-tag :options="dict.type.template_own_type" :value="item.ownType" size="mini" /></span>
          </el-descriptions-item>



          <el-descriptions-item label="分类/人群">
            <dict-tag :options="dict.type.template_cat_type" :value="item.catType" size="mini" />
            <el-divider direction="vertical"></el-divider>
            <dict-tag :options="dict.type.template_user_type" :value="item.userType" size="mini" />
          </el-descriptions-item>



          <el-descriptions-item label="价格/实付">
            <span class="price-text">{{ formatPrice(item.price) }}</span>
            <el-divider direction="vertical"></el-divider>
            <span class="pay-price-text">{{ formatPrice(item.payPrice) }}</span>
          </el-descriptions-item>

          <el-descriptions-item label="优惠券" v-if="item.coupon && item.coupon.uuid">
            <span class="coupon-text">
              {{ item.coupon.subMoney }}{{ item.coupon.type === 2 ? '折' : '元' }}
            </span>
          </el-descriptions-item>

          <el-descriptions-item label="创建时间">
            {{ parseTime(item.createDate) || '--' }}
          </el-descriptions-item>

          <el-descriptions-item label="付款时间" v-if="item.payDate">
            {{ parseTime(item.payDate) }}
          </el-descriptions-item>

          <el-descriptions-item label="完成时间" v-if="item.finishDate">
            {{ parseTime(item.finishDate) }}
          </el-descriptions-item>
        </el-descriptions>

        <!-- 操作按钮 -->
        <div class="order-actions">
          <el-button size="large" type="primary" icon="el-icon-view" @click="onInfo(item)" class="action-btn">
            详情
          </el-button>
        </div>
        <div class="order-actions">


          <el-button v-if="item.payPrice && [1, 2, 3, 4].includes(item.status)" size="large" type="warning"
            icon="el-icon-refresh" @click="onReMake(item)" class="action-btn">
            重新制作
          </el-button>

          <el-button v-if="item.payPrice && [1, 2, 3, 4].includes(item.status)" size="large" type="danger"
            icon="el-icon-s-open" @click="onRefund(item)" class="action-btn">
            退款
          </el-button>
        </div>
      </el-card>
    </div>

    <!-- 空状态 -->
    <div v-else class="empty-container">
      <el-empty description="暂无订单数据" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'MobileOrderList',
  dicts: ['template_cat_type', 'template_own_type', 'template_user_type'],
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    list: {
      type: Array,
      default() {
        return []
      }
    }
  },
  methods: {
    // 获取状态类型
    getStatusType(status) {
      const statusMap = {
        0: 'info',
        1: '',
        2: 'warning',
        3: 'success',
        4: 'danger',
        5: 'danger'
      }
      return statusMap[status] || 'info'
    },

    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        0: '待付款',
        1: '已付款',
        2: '制作中',
        3: '已完成',
        4: '制作失败',
        5: '已退款'
      }
      return statusMap[status] || '未知状态'
    },

    // 格式化价格
    formatPrice(price) {
      if (!price) return '--'
      return `${(price / 100).toFixed(2)} 元`
    },

    // 查看详情
    onInfo(row) {
      this.$emit('info', row)
    },

    // 重新制作
    onReMake(row) {
      this.$emit('remake', row)
    },

    // 退款
    onRefund(row) {
      this.$emit('refund', row)
    }
  }
}
</script>

<style lang="scss" scoped>
.mobile-order-list {
  .loading-container {
    padding: 20px;
    background: white;
    border-radius: 8px;
    margin-bottom: 10px;
  }

  .order-list {
    .order-card {
      margin-bottom: 10px;
      border-radius: 8px;
      border: 1px solid #e4e7ed;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  .empty-container {
    background: white;
    border-radius: 8px;
    padding: 40px 20px;
    text-align: center;
  }
}

.order-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;

  .order-number {
    flex: 1;

    .label {
      font-size: 12px;
      color: #999;
    }

    .value {
      font-size: 14px;
      color: #333;
      font-weight: 500;
      word-break: break-all;
    }
  }

  .status-tag {
    font-size: 12px;
    margin-left: 10px;
  }
}

.order-descriptions {
  margin-bottom: 15px;

  ::v-deep .el-descriptions__label {
    font-weight: 500;
  }

  ::v-deep .el-descriptions__content {
    word-break: break-all;
  }
}

.template-name {
  font-weight: 500;
  color: #333;
}

.price-text,
.pay-price-text {
  font-weight: 500;
  color: #e6a23c;
}

.coupon-text {
  color: #67c23a;
  font-weight: 500;
}

.order-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid #f0f0f0;

  .action-btn {
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 4px;

    &.el-button--mini {
      padding: 5px 10px;
    }
  }
}

// 移动端优化
@media (max-width: 768px) {
  .order-header {
    align-items: flex-start;
    gap: 8px;

    .order-number {
      width: 100%;

      .value {
        font-size: 13px;
      }
    }
  }

  .order-descriptions {
    ::v-deep .el-descriptions__label {
      font-size: 12px;
      width: 70px !important;
    }

    ::v-deep .el-descriptions__content {
      font-size: 12px;
    }
  }

  .order-actions {
    flex-wrap: wrap;
    gap: 6px;

    .action-btn {
      font-size: 11px;
      padding: 4px 8px;
      flex: 1;
      min-width: 0;

      &.el-button--mini {
        padding: 4px 8px;
      }
    }
  }
}

@media (max-width: 480px) {
  .order-actions {
    .action-btn {
      font-size: 10px;
      padding: 3px 6px;

      &.el-button--mini {
        padding: 3px 6px;
      }
    }
  }
}
</style>
